<template>
    <div class="user-center">
        <NavBar>
            <template #default>
                我的
            </template>
        </NavBar>

        <!-- 用户信息栏 -->
        <router-link :to="token ? '/personalDetails' : '/login'" class="link">
         <div class="user-info">
             <!-- 头像部分 -->
             <div class="avatar">
              <template v-if="token">
                <!-- 如果有头像则显示头像，否则显示用户图标 -->
                <el-avatar v-if="userAccount.avatar" :size="40" :src="userAccount.avatar" />
                <el-icon v-else>
                  <User />
                </el-icon>
               </template>
             <el-icon v-else>
                  <User />
               </el-icon>
              </div>

             <!-- 用户信息部分 -->
             <div class="login-text">
              <span v-if="token && userAccount.userName">{{ userAccount.userName }}</span>
              <span v-else>点击登录</span>
             </div>

             <!-- 右侧箭头 -->
             <div class="arrow">
                <el-icon>
                  <ArrowRight />
                </el-icon>
              </div>
            </div>
        </router-link>

        <!-- 我的订单 -->
        <div class="order-section">
            <div class="section-header">
                <h3>我的订单</h3>
                <div class="view-all" @click="viewAllOrders">
                    <span>全部</span>
                    <el-icon>
                        <ArrowRight />
                    </el-icon>
                </div>
            </div>
            <div class="order-types">
                <div class="order-item" @click="goToOrderList(1)">
                    <el-badge :value="orderCounts.pendingPayment" :max="99" class="badge-item">
                        <el-icon>
                            <Money />
                        </el-icon>
                    </el-badge>
                    <span>待付款</span>
                </div>
                <div class="order-item" @click="goToOrderList(2)">
                    <el-badge :value="orderCounts.pendingShipment" :max="99" class="badge-item">
                        <el-icon>
                            <Box />
                        </el-icon>
                    </el-badge>
                    <span>待发货</span>
                </div>
                <div class="order-item" @click="goToOrderList(3)">
                    <el-badge :value="orderCounts.pendingReceipt" :max="99" class="badge-item">
                        <el-icon>
                            <Van />
                        </el-icon>
                    </el-badge>
                    <span>待收货</span>
                </div>
                <div class="order-item" @click="goToOrderList(4)">
                    <el-badge :value="orderCounts.pendingReview" :max="99" class="badge-item">
                        <el-icon>
                            <ChatLineRound />
                        </el-icon>
                    </el-badge>
                    <span>待评价</span>
                </div>
                <div class="order-item" @click="goToOrderList(6)">
                    <el-badge :value="orderCounts.afterSale" :max="99" class="badge-item">
                        <el-icon>
                            <Service />
                        </el-icon>
                    </el-badge>
                    <span>退款/售后</span>
                </div>
            </div>
        </div>

        <!-- 其他设置项 -->
        <div class="settings-section">
            <!-- 在您的用户中心页面中，修改收货地址部分 -->
            <div class="setting-item" @click="goToAddress">
                <div class="item-left">
                 <el-icon>
                     <Location />
                  </el-icon>
                   <span>收货地址</span>
             </div>
              <el-icon>
                 <ArrowRight />
             </el-icon>
            </div>
            <router-link to="/customerService" class="setting-item">
                <div class="item-left">
                    <el-icon>
                        <Headset />
                    </el-icon>
                    <span>客服反馈</span>
                </div>
                <el-icon>
                    <ArrowRight />
                </el-icon>
            </router-link>
            <div class="setting-item">
                <div class="item-left">
                    <el-icon>
                        <Setting />
                    </el-icon>
                    <span>通用设置</span>
                </div>
                <el-icon>
                    <ArrowRight />
                </el-icon>
            </div>
            <div class="setting-item">
                <div class="item-left">
                    <el-icon>
                        <User />
                    </el-icon>
                    <span>账号与安全</span>
                </div>
                <el-icon>
                    <ArrowRight />
                </el-icon>
            </div>
            <div class="setting-item">
                <div class="item-left">
                    <el-icon>
                        <InfoFilled />
                    </el-icon>
                    <span>关于</span>
                </div>
                <el-icon>
                    <ArrowRight />
                </el-icon>
            </div>
        </div>

        <!-- 退出登录 -->
        <div class="logout-btn" @click="logout" v-if="token">
            退出登录
        </div>
    </div>
</template>

<script setup>
import NavBar from '../../components/common/NavBar.vue';
import {
    ArrowRight, Money, Box, Van, Headset,
    ChatLineRound, Service, Location,
    Setting, InfoFilled, User,
} from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/stores/userStore';
import { useOrderStore } from '@/stores/orderStore';
import { onMounted, ref } from 'vue';

const userStore = useUserStore();
const orderStore = useOrderStore();
const router = useRouter();

const userAccount = userStore.userAccount;
const token = userStore.token;
const orderCounts = ref({
    pendingPayment: 0,
    pendingShipment: 0,
    pendingReceipt: 0,
    pendingReview: 0,
    afterSale: 0
});

// 加载订单状态数量
const loadOrderCounts = async () => {
    if (!token) return;

    try {
        const counts = await orderStore.fetchOrderStatusCounts(userAccount.userId);
        orderCounts.value = {
            pendingPayment: counts.pendingPayment || 0,
            pendingShipment: counts.pendingShipment || 0,
            pendingReceipt: counts.pendingReceipt || 0,
            pendingReview: counts.pendingReview || 0,
            afterSale: counts.afterSale || 0
        };
    } catch (error) {
        ElMessage.error('获取订单数量失败');
        console.error('Failed to load order counts:', error);
    }
};

const logout = () => {
    userAccount.isLogin = false;
    localStorage.removeItem('userAccount');
    localStorage.removeItem('token');
    // 强制刷新页面
    location.reload();
    ElMessage.success('账号已退出');
};

const goToAddress = () => {
    if (!userStore.isLogin) {
        router.push('/login');
        return;
    }
    router.push('/address');
};

const viewAllOrders = () => {
    if (!token) {
        router.push('/login');
        return;
    }
    router.push('/orderList');
};

const goToOrderList = (status) => {
    if (!token) {
        router.push('/login');
        return;
    }
    router.push(`/orderList?status=${status}`);
};

// 组件挂载时加载订单数量
onMounted(() => {
    if (token) {
        loadOrderCounts();
    }
});
</script>

<style scoped>
.user-center {
    background-color: #f5f5f5;
    min-height: 100vh;
    padding-bottom: 60px;
}

/* 用户信息栏 */
.link {
    text-decoration: none;
    color: inherit;
}

.user-info {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    background-color: #fff;
    margin-bottom: 10px;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.user-info:hover {
    background-color: #f9f9f9;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.avatar {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 15px;
    border: 1px solid #f0f0f0;
    height: 48px;
    width: 48px;
    background-color: #f5f5f5;
}

.avatar .el-icon {
    font-size: 24px;
    color: #999;
}

.avatar .el-avatar {
    width: 100%;
    height: 100%;
}

.login-text {
    flex: 1;
    font-size: 16px;
    color: #333;
    font-weight: 500;
}

.login-text span {
    display: block;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.arrow .el-icon {
    font-size: 16px;
    color: #999;
}

/* 我的订单 */
.order-section {
    background-color: #fff;
    margin-bottom: 10px;
    padding: 15px;
    border-radius: 8px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.section-header h3 {
    margin: 0;
    font-size: 16px;
    color: #333;
}

.view-all {
    display: flex;
    align-items: center;
    color: #999;
    font-size: 14px;
    cursor: pointer;
}

.view-all span {
    margin-right: 5px;
}

.order-types {
    display: flex;
    justify-content: space-around;
    text-align: center;
}

.order-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.order-item .el-icon {
    font-size: 24px;
    margin-bottom: 5px;
    color: #ff5000;
}

.order-item span {
    font-size: 12px;
    color: #666;
}

.badge-item :deep(.el-badge__content) {
    top: 0;
    right: 10px;
    background-color: #ff5000;
}

/* 设置项 */
.settings-section {
    background-color: #fff;
    margin-bottom: 10px;
    border-radius: 8px;
}

.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #f5f5f5;
    cursor: pointer;
}

.item-left {
    display: flex;
    align-items: center;
}

.item-left .el-icon {
    margin-right: 10px;
    color: #ff5000;
}

.setting-item:last-child {
    border-bottom: none;
}

/* 退出登录 */
.logout-btn {
    margin: 20px 15px;
    padding: 12px 0;
    background-color: #ff5000;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
}
</style>